<template>
  <div>
    <a-layout>
      <a-layout-sider
        breakpoint="lg"
        :collapsed-width="0"
        v-model:collapsed="collapse"
        :trigger="null"
        collapsible
        @collapse="onCollapse"
        :style="{
          overflow: 'auto',
          height: '94vh',
          left: 0,
          background: '#fff',
        }"
      >
        <a-menu
          mode="inline"
          v-model:selectedKeys="selectedKeys"
          v-model:openKeys="openKeys"
          @click="menuChage"
        >
          <a-menu-item key="rmb">
            <iconpark-icon name="rmb"></iconpark-icon>
            rmb管理
          </a-menu-item>
          <a-sub-menu key="rental">
            <template #title>
              <span>
                <iconpark-icon name="rental"></iconpark-icon>
                租房支出管理
              </span>
            </template>
            <a-menu-item key="house1" title="water">
              <iconpark-icon name="water"></iconpark-icon>
              水费
            </a-menu-item>
            <a-menu-item key="house2" title="electricity">
              <iconpark-icon name="electricity"></iconpark-icon>
              电费
            </a-menu-item>
          </a-sub-menu>
          <a-sub-menu key="expenditure">
            <template #title>
              <iconpark-icon name="expenditure"></iconpark-icon>
              <span> 其他生活支出 </span>
            </template>
            <a-menu-item key="eat">
              <iconpark-icon name="eat"></iconpark-icon>
              吃的
            </a-menu-item>
            <a-menu-item key="supplies">
              <iconpark-icon name="supplies"></iconpark-icon>
              用的
            </a-menu-item>
            <a-menu-item key="other">其他</a-menu-item>
          </a-sub-menu>
        </a-menu>
      </a-layout-sider>
      <a-layout style="padding: 0 24px 24px; margin: 16px 5px">
        <a-layout-content
          :style="{
            background: '#fff',
            padding: '0px 10px',
            margin: 0,
            minHeight: '87vh',
            overflow: 'initial',
          }"
        >
          <div class="float">
            <a-button
              v-if="showCollapsedBtn"
              type="primary"
              shape="circle"
              size="small"
              @click="coll(collapse)"
            >
              <template #icon>
                <menu-unfold-outlined v-if="collapse" class="trigger" />
                <menu-fold-outlined v-else class="trigger" />
              </template>
            </a-button>
          </div>
          <router-view></router-view>
        </a-layout-content>
      </a-layout>
    </a-layout>
  </div>
</template>

<script>
import { MenuUnfoldOutlined, MenuFoldOutlined } from "@ant-design/icons-vue";
import { defineComponent, getCurrentInstance, onMounted, ref } from "vue";
export default defineComponent({
  setup() {
    const { proxy } = getCurrentInstance();
    const selectedKeys = ref(["rmb"]);
    const collapse = ref(false);
    const showCollapsedBtn = ref(false);
    onMounted(() => {
      const adminMenu = localStorage.getItem("adminMenu");
      if (adminMenu != null) {
        selectedKeys.value[0] = adminMenu;
        if (adminMenu.indexOf("house") !== -1) {
          if (adminMenu.indexOf("1") !== -1) {
            console.log("1 - 2");
            proxy.$router.push({ name: "house", params: { type: "water" } });
          } else if (adminMenu.indexOf("2") !== -1) {
            console.log("1 - 3");
            proxy.$router.push({ name: "house", params: { type: "electricity" } });
          }
        } else {
          console.log("1 - 4");
          proxy.$router.push({ name: adminMenu });
        }
      } else {
        // selectedKeys.value[0] = "rmb";
        // proxy.$router.push({ name: "rmb" });
      }
    });
    const coll = (e) => {
      collapse.value = !e;
    };
    const onCollapse = (e) => {
      showCollapsedBtn.value = e;
    };
    const menuChage = ({ item, key }) => {
      if (key.indexOf("house") === 0) {
        proxy.$router.push({ name: "house", params: { type: item.title } });
      } else {
        proxy.$router.push({ name: key });
      }

      localStorage.setItem("adminMenu", key);
    };

    return {
      collapse,
      showCollapsedBtn,
      selectedKeys,
      openKeys: ref(["rental"]),
      coll,
      onCollapse,
      menuChage,
    };
  },
  components: { MenuUnfoldOutlined, MenuFoldOutlined },
});
</script>

<style lang="scss" scoped>
.float {
  position: absolute;
  right: 15px;
  bottom: 15px;
}
</style>
